<script setup lang="ts">
import '@/styles/main.css'

import LiquidBackground from '@/components/LiquidBackground.vue'
import BlurReveal from '@/components/BlurReveal.vue'

</script>

<template>
<!--  h-96-->
  <div class="relative  w-full overflow-hidden rounded h-full">
    <LiquidBackground />
      <BlurReveal
        :delay="0.2"
        :duration="0.75"
        class="p-8 text-center absolute-center"
      >
        <h2 class="text-3xl font-bold tracking-tighter xl:text-6xl/none sm:text-5xl">小兰的工具集</h2>
        <span class="text-pretty text-l tracking-tighter xl:text-2xl/none sm:text-2xl">
        FOR HIGHER EFFICIENCY
      </span>
      </BlurReveal>

  </div>

</template>

<style scoped>
.absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
</style>